<template>
  <el-dialog :title="$t('productCenter.product.previewProduct')" :visible.sync="showState" :before-close="handleClose" :close-on-click-modal="false">
    <table>
      <tr>
        <td>{{ $t('productCenter.product.previewData.id') }}</td>
        <td>{{ previewData['id'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.name') }}</td>
        <td>{{ previewData['loanProductName'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.type') }}</td>
        <td>{{ setTypeView(previewData['loanProductType']) }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.money') }}</td>
        <td>{{ previewData['loanQuotaMix'] }} - {{ previewData['loanQuotaMax'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.period') }}</td>
        <td>{{ previewData['loanTermMix'] }} - {{ previewData['loanTermMax'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.lendRate') }}</td>
        <td>{{ previewData['loanDayRate'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.technology') }}</td>
        <td>{{ previewData['technologyRate'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.review') }}</td>
        <td>{{ previewData['auditRate'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.paymentMoney') }}</td>
        <td>{{ previewData['paymentMoneyMin'] }} - {{ previewData['paymentMoneyMax'] }}</td>
      </tr>
      <tr>
        <td>{{ $t('productCenter.product.previewData.amount') }}</td>
        <td>{{ previewData['repayMoneyMin'] }} - {{ previewData['repayMoneyMax'] }}</td>
      </tr>
      <tr v-if="previewData['period'] > 1">
        <td>{{ $t('productCenter.product.previewData.periodsNumber') }}</td>
        <td>{{ previewData['period'] }}</td>
      </tr>
      <tr v-for="(item, index) in previewData['periodAmountList']" :key="index">
        <td>{{ $t('productCenter.product.list.periodsRate1') }}{{ item['currentPeriod'] }}{{ $t('productCenter.product.list.periodsRate2') }}</td>
        <td>{{ item['repayMin'] }} - {{ item['repayMax'] }}</td>
      </tr>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">{{ $t('common.operate.close') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ProductPreviewDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  computed: {
    showState: {
      get: function() {
        return this.showDialog
      },
      set: function() {
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('change-dialog', 'isPreview', false)
    },
    setTypeView(data) {
      const type = this.$t('productCenter.product.type1').filter(v => {
        return v.value === data
      })
      return (type.length > 0 && type[0]['desc']) ? type[0]['desc'] : ''
    }
  }
}
</script>

<style lang="scss" scoped>
table{
  width: 100%;
  border-collapse: collapse;
  tr{
    width: 100%;
    text-align: center;
    td{
      height: 50px;
      border: 1px #cccccc solid;
    }
  }
}
</style>
